import React, { useRef, useState } from 'react';
import { Amap, Marker } from '@amap/amap-react';
import { Form, Switch , Input, InputNumber } from 'antd';


import { MapType, ControlBar, Toolbar, HawkEye, Scale } from '@amap/amap-react';

const FormItem = Form.Item;

const ExampleMap = () => {
  const mapRef = useRef();
  const [center, setCenter] = useState([116.473571, 39.993083]);
  const [zoom, setZoom] = useState(14);
  const [pitch, setPitch] = useState(45);
  const [rotation, setRotation] = useState(15);

  const [isOpen, setIsOpen] = useState(true);
     
  return (
    <div>
	 

      <MapType />

      <ControlBar position={{ top: '10px', left: '10px' }} />

      <HawkEye isOpen={isOpen} showButton={false} />

      <Scale position="LB" />

      <Toolbar position={{ top: '110px', left: '40px' }} />



      <Form layout="inline">
        <FormItem label="zoom">
          <InputNumber
            value={zoom}
            onChange={(v) => setZoom(v)}
            style={{ width: '60px' }}
          />
        </FormItem>
        <FormItem label="center">
          <Input readOnly value={center.join(',')} style={{ width: '180px' }} />
        </FormItem>
        <FormItem label="pitch">
          <InputNumber
            value={pitch}
            onChange={(v) => setPitch(v)}
            step={5}
            style={{ width: '60px' }}
          />
        </FormItem>
        <FormItem label="rotation">
          <InputNumber
            value={rotation}
            onChange={(v) => setRotation(v)}
            step={5}
            style={{ width: '60px' }}
          />
        </FormItem>
      </Form>

      <div style={{ width: '100%', height: '630px', paddingTop: '10px' }}>
		
        <Amap
          ref={mapRef}
          viewMode="3D"
          mapStyle="amap://styles/whitesmoke"
          zoom={zoom}
          center={center}
          pitch={pitch}
          rotation={rotation}
          showIndoorMap={false}
          isHotspot
          onHotspotClick={(map, e) => {
            if (e && e.lnglat) {
              setCenter([e.lnglat.lng, e.lnglat.lat]);
            }
          }}
          onZoomChange={(map) => setZoom(map.getZoom())}
          onMapMove={(map) => setCenter(map.getCenter().toArray())}
          onDragging={(map) => {
            const p = map.getPitch();
            setPitch(p);

            const r = map.getRotation();
            setRotation(r);
          }}
        >
          <Marker
            position={[116.473571, 39.993083]}
            label={{
              content: '首开广场',
              direction: 'bottom',
            }}
          />
        </Amap>
      </div>
    </div>
  );
};

export default ExampleMap;